<template>
  <form action="" method="post">
    <table width="100%" align="center">
      <tr>
        <td>评 论</td>
      </tr>
      <tr>
        <td>用户名：</td>
        <td>
          <input id="cauthor" name="cauthor" :value="commentMan" readonly />
          IP：
          <input
            name="cip"
            id="cip"
            value="xxxxxx"
            readonly="readonly"
            style="border: 0px"
          />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <textarea name="ccontent" id="ccontent" cols="70" rows="10" v-model="ccontent"></textarea>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input
            id="commentSubmit"
            class="login_sub"
            name="submit"
            value="发  表"
            type="button"
            @click="addComment"
          />
          <span v-show="errorMsg != ''" class="error">{{errorMsg}}</span>
        </td>
      </tr>
    </table>
  </form>
</template>

<script>
export default {
  name: "comment-add",
  props:['uname','nid'],
  data(){
    return {
      ccontent:'',
      errorMsg:''
    }
  },
  computed:{
    commentMan:function(){
      return this.uname == null ? '这家伙很懒什么也没留下' : this.uname
    }
  },
  methods:{
    addComment(){
      if(this.ccontent == ''){
        this.errorMsg='评论不能为空！'
        return
      }
      this.$axios({
        method:'post',
        url:'/api/addComment',
        data:{
            cnid:this.nid,
            ccontent:this.ccontent
        }
      }).then(rs =>{
        if(rs.data.code===5200){
          alert('评论添加成功！')
          this.ccontent = ''
          this.$bus.$emit('commentListRefresh')
        }
      })
    }
  }
};
</script>

<style scoped>

#ccontent {
  width: 99%;
}
.error{
  color: red;
  font-weight: bold;
  font-style: italic;
}
</style>